<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="demo">
			<input type="text" id="firstName" v-bind:value="firstName" />
			<input type="text" id="lastName" v-bind:value="lastName" />
			<p><input type="text" id="lastName" v-bind:value="fullName" /></p>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#demo",
				data: {
					firstName: '',
					lastName: ''
				},
				computed: {
					//计算属性，可以由get和set方法
					fullName: {
						get: function() {
							return this.firstName + ' ' + this.lastName;
						},
						set: function(val) {
							var names = val.split(' ');
							this.firstName = names[0];
							this.lastName = names[names.length - 1];
						}
					}
				},
			});

			//测试数据
			vm.firstName = "chen";
			vm.lastName = "jing";
			vm.fullName = "li lei";
		</script>

	</body>
</html>
